<template>
	<view @click="back" class="back">
		<image src="../../static/back.png" mode="widthFix"></image>
	</view>
	<view class="more">
		<image src="../../static/zh_389.png" mode="widthFix" @click="setting"></image>
	</view>
	<view class="goods">
		<view class="swiperBar">
			<view v-for="(item, index) in swiperList" :animation="item" class="box"></view>
		</view>
		<swiper @change="change" circular :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in imageList">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view class="content">
		<view class="title">{{ item.name }}</view>
		<view class="con_content">{{ item.content }}</view>
		<view class="leftAndRight">
			<view class="left">选择</view>
			<view class="right">
				<text>规格分类/成分分类</text>
			</view>
		</view>
		<view class="leftAndRight">
			<view class="left"></view>
			<view class="right">
				<view class="picker">
					<view class="size">
						<view @click="checkSize(index)" :style="{ backgroundColor: size === index ? '#FFAD63' : '#F3F3F3' }"
								v-for="(item, index) in arrSize">{{ item }}</view>
					</view>
					<view class="temperature">
						<view @click="temperature = index" :style="{ backgroundColor: temperature === index ? '#FFAD63' : '#F3F3F3' }"
								v-for="(item, index) in arrTemperature">{{ item }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="leftAndRight">
			<view class="left">价格</view>
			<view class="right">
				<image style="width: 21rpx; margin: 4rpx;" src="../../static/sl_51.png" mode="widthFix"></image>{{ item.value.toFixed(2) }} CNY
			</view>
		</view>
<!-- 		<view class="leftAndRight">
			<view class="left">快递</view>
			<view class="right" style="color: red;">
				立即下单马上就能送到/20分钟
			</view>
		</view> -->
	</view>
	<view class="footer">
		<view class="shop">
			<image src="../../static/shop.png" mode="widthFix"></image>
			<text>店铺</text>
		</view>
		<view class="service">
			<image src="../../static/service.png" mode="widthFix"></image>
			<text>客服</text>
		</view>
		<text class="leftText">五人团购</text>
		<text class="rightText" @click="buy">立即购买</text>
		<image class="left" src="../../static/left.png" mode="widthFix"></image>
		<image class="right" src="../../static/right.png" mode="widthFix"></image>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const item = ref(JSON.parse(uni.getStorageSync('shopping')))
const size = ref(0)
const arrSize = ref(['中杯', '大杯', '特大杯'])
const temperature = ref(0)
const arrTemperature = ref(['正常冰', '少冰', '常温'])
console.log(item.value);
const checkSize = (i) => {
	const origin = JSON.parse(uni.getStorageSync('shopping'))
	size.value = i
	const v = (i == 0 ? 0 : (i == 1 ? 2 : 4))
	item.value.value = origin.value + v
}
const imageList = ref([
	{ url: item.value.url }
])
const swiperList = ref(Array(imageList.value.length).fill({}))
let animation = uni.createAnimation({
	duration: 1000,
	timingFunction: 'ease',
})
swiperList.value[0] = animation.width('140rpx').step().export()
const change = (e) => {
	for (let i = 0; i < swiperList.value.length; ++i) {
		swiperList.value[i] = animation.width('30rpx').step().export()
	}
	swiperList.value[e.detail.current] = animation.width('140rpx').step().export()
}
const back = () => {
	uni.navigateBack()
}
const id = uni.getStorageSync('userId')
let user = {};
const db = uniCloud.database()
db.collection('user').doc(id).get().then(res => {
	console.log(res.result.data[0]);
	user = res.result.data[0]
})
const buy = () => {
	uni.showLoading({
		title: '购买中...',
		mask: true
	})
	db.collection('purchase').add({
		time: Date.now(),
		recipient: user.receiver,
		address: user.address,
		value: item.value.value,
		goodsId: item.value._id,
		userId: id,
		specification: {
			capacity: arrSize.value[size.value],
			temperature: arrTemperature.value[temperature.value],
			material: ''
		}
	}).then(res => {
		uni.hideLoading()
		console.log(res);
		uni.showToast({
			title:'购买成功！'
		})
		size.value = 0
		temperature.value = 0
	}).catch(err => {
		uni.hideLoading()
		console.log(err.message);
	})
}

const setting = () => {
	uni.reLaunch({
		url: '/pages/setting/setting'
	})
}
</script>

<style lang="scss" scoped>
	.back {
		background-color: white;
		height: 93rpx;
		width: 93rpx;
		position: fixed;
		z-index: 2;
		border-radius: 70rpx;
		left: 50rpx;
		top: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 50rpx;
		}
	}
	.more {
		background-color: white;
		height: 93rpx;
		width: 93rpx;
		position: fixed;
		z-index: 2;
		border-radius: 70rpx;
		right: 70rpx;
		top: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 40rpx;
		}
	}
	.goods {
		background-color: #F0F0F0;
		.swiperBar {
			margin-top: 20rpx;
			height: 10rpx;
			display: flex;
			position: absolute;
			top: 740rpx;
			left: 270rpx;
			z-index: 3;
			.box {
				height: 100%;
				width: 30rpx;
				background-color: gray;
				margin: 0 4rpx;
				border-radius: 10rpx;
			}
		}
		swiper {
			height: 916rpx;
			.swiper-item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				image {
					height: 100%;
				}
			}
		}
		
	}
	.content {
		height: 700rpx;
		width: 100%;
		border-radius: 70rpx 70rpx 0 0;
		background-color: white;
		top: 800rpx;
		position: absolute;
		z-index: 2;
		.title {
			padding: 50rpx 60rpx;
			font-size: 54rpx;
			font-weight: 600;
		}
		.con_content {
			padding: 0rpx 60rpx;
			font-size: 32rpx;
		}
		
		
		.picker {
			display: flex;
			flex-direction: column;
			view {
				
			}
			.size {
				display: flex;
				view {
					padding: 20rpx;
					margin: 10rpx;
					background-color: #F3F3F3;
				}
			}
			.temperature {
				display: flex;
				view {
					padding: 20rpx;
					margin:10rpx;
					background-color: #F3F3F3;
				}
			}
		}
		
		
		
		.leftAndRight {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			margin: 40rpx 0;
			.left {
				color: #7B7B7B;
				margin: 0 35rpx;
				width: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.right {
				display: flex;
				justify-content: center;
				align-items: center;
				// font-weight: 550;
				image {
					width: 38rpx;
				}
			}
		}
	}
	
	.footer {
		.shop {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 20rpx;
			position: fixed;
			left: 70rpx;
			bottom: 45rpx;
			image {
				width: 39rpx;
			}
		}
		.service {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 20rpx;
			position: fixed;
			left: 180rpx;
			bottom: 45rpx;
			image {
				width: 35rpx;
			}
		}
		.leftText {
			position: fixed;
			color: white;
			width: 194rpx;
			bottom: 60rpx;
			right: 210rpx;
			font-size: 28rpx;
			z-index: 2;
		}
		.rightText {
			position: fixed;
			color: white;
			width: 194rpx;
			bottom: 60rpx;
			right: 20rpx;
			font-size: 28rpx;
			z-index: 2;
		}
		.left {
			position: fixed;
			width: 194rpx;
			bottom: 40rpx;
			right: 253rpx;
		}
		.right {
			position: fixed;
			width: 194rpx;
			bottom: 40rpx;
			right: 60rpx;
		}
	}
</style>
